<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-12 08:38:02
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-05-12 14:20:23
 * @FilePath: /amap-web-vr/src/components/map-setting-drawer/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>  
    <div class="drawer">
      <el-drawer  v-model="drawer" destroy-on-close direction='ltr' title="地图配置"  >
      
      <Cell v-model="mapStore.satellite" title="卫星图层"/>
      <Cell v-model="mapStore.road" title="开启路网"/>
      <Cell v-model="mapStore.traffic" title="开启实时交通"/>
      <Cell v-model="mapStore.toolbar" title="开启工具"/>
      <Cell v-model="mapStore.scale" title="开启比例尺"/>
      <Cell v-model="mapStore.location" title="开启定位"/>
      <Cell v-model="mapStore.buildings" title="开启建筑物"/>
      
    </el-drawer>
    </div>
</template>
  
<script lang="ts" setup>
  import Cell from '@/components/cell/index.vue'
  import { ref, defineExpose,onMounted} from 'vue'
  import {useMapStore} from '@/stores/map'
  const mapStore = useMapStore()
  
  const drawer = ref(false)
  const open = () => {
    drawer.value = true
}
defineExpose({open})
onMounted(()=>{
  
})
</script>

<style scoped lang='scss'>
.drawer{
  background: red !important;
  :deep(.el-drawer){
    .el-drawer__title {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 0;
    }
    .el-drawer__header {
      margin-bottom: 0;
    }
    .el-drawer__body{
      padding: 15px 20px;
    }
  }
  
  
}


</style>
  